iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
Mobile Development

SwiftUI快速入門30天系列 第 21

Day18 - Binding 使用綁定傳遞資料

  • 分享至 

  • xImage
  •  

在 SwiftUI 中,@Binding 是一個強大的屬性包裝器,用於在不同視圖間共享和更新數據。當一個視圖需要從其父視圖中接收並更新數據時,@Binding 就派上用場了。這樣,子視圖可以直接修改父視圖中的狀態,而不需要顯式地傳遞回調函數。

如何使用 @Binding

  1. 定義父視圖中的狀態:
    父視圖通常會擁有一個狀態屬性,使用 @State 來聲明。

    struct ParentView: View {
        @State private var isOn = false
    
        var body: some View {
            ChildView(isOn: $isOn)
        }
    }
    
  2. 在子視圖中使用 @Binding
    子視圖接收來自父視圖的綁定變量,並且可以使用 @Binding 更新這些變量。

    struct ChildView: View {
        @Binding var isOn: Bool
    
        var body: some View {
            Toggle("Switch", isOn: $isOn)
        }
    }
    
  3. 父子視圖的數據傳遞:
    當子視圖中 Toggle 的狀態改變時,父視圖中的 isOn 也會隨之改變,達到雙向數據綁定的效果。

範例應用場景

想像一個設定頁面,其中的開關狀態由父視圖管理,而開關元件在子視圖中。這樣的結構讓代碼更加模組化,並且易於維護。透過 @Binding,不僅能實現數據共享,還能避免冗長的參數傳遞或狀態同步問題。

總結來說,@Binding 是 SwiftUI 中用來在視圖間同步和共享狀態的核心工具,適合需要雙向數據流的場景。


上一篇
Day 18: @Environment,使用環境變數
下一篇
Day22 - Animation,使用動畫效果
系列文
SwiftUI快速入門30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言